<template>
  <div>
    <van-tree-select
      height="55vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
         <div v-for="(item,i) in list" :key="i">
            <h2>{{item.cate}}</h2>
            <div v-for="(item2 ,j) in item.children" :key="j">
                 <div>{{item2.title}}</div>
                 <div @click="goTo('/detail/'+item2.id)"><img :src="item2.image" /></div>
                 <div>价格：{{item2.price}}</div>
                 <div>数量：{{item2.num}}</div>
            </div>
         </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import axios from 'axios';
import {mapMutations,mapState} from 'vuex';
export default {
  data() {
    return {
      active: 0
    };
  },
  computed:{
      ...mapState(['list']),

      // 构造tab数据 
      items(){
          let arr=[];
          this.list.forEach((item)=>{
              arr.push({text:item.cate})
          })
          console.log('arr',arr);
         return arr;
      }
  },
  methods:{
      ...mapMutations(['SET_LIST']),
      goTo(url){
        this.$router.push(url)
      }
  },
  created(){
    axios.get('/api/list').then((res)=>{
        console.log('api/list res',res);
        this.SET_LIST(res.data.data);

    })
  }
};
</script>